@if (box && content) {
  <div
    class="feature-box relative overflow-hidden {{
      content.mode === 'float' ? 'feature-float' : 'feature-cover'
    }}"
  >
    <div class="feature-inner">
      @if (isHoverIcon) {
        <div class="btns absolute flex z-10">
          @if (box.fullIcon) {
            <a href="javascript:void(0)" (click)="open(box.img)" class="btn expand-image btn-full">
              <app-icon [content]="{ svg: box.fullIcon }" />
            </a>
          }
          @if (box.copyIcon) {
            <a href="javascript:void(0)" (click)="copy(box.img)" class="btn btn-full">
              <app-icon [content]="{ svg: box.copyIcon }" />
            </a>
          }
          @if (box.openIcon) {
            <a href="{{ box.link }}" class="btn icon-link btn-open icon-{{ box.openIcon }}">
              <app-icon [content]="{ svg: 'open-in-new' }" />
            </a>
          }
        </div>
      } @else {
        @if (box.link) {
          <a href="{{ box.link }}" class="btns flex absolute z-10 w-full h-full"></a>
        }
      }
      <div class="feature-inner-ling relative block overflow-hidden">
        <div class="media" [ngClass]="box.ratios || 'media-4-3'">
          @if (box.img) {
            <app-img [attr.data-path]="'img'" [content]="box.img" />
          }
        </div>
        @if (content.mode === 'float' || type !== 'picture') {
          <div class="title one-line px-3 absolute bottom-0 text-center block w-full opacity-0">
            {{ title }}
          </div>
        }
      </div>
    </div>
  </div>
}
